import React, { useRef, useState } from 'react';
import { message, Button, PageHeader } from 'antd';
import { AddCompbldkGrh, DelCompbldkGrh } from '@/services/commCRUD';
import DataEdit from '@/components/base/DataEdit';
import DataTable from '@/components/base/DataTable';
import _ from 'lodash';
type PropField = {
  CUID: number;
};
const daoName = 'ShBlkhIndigl';
const columns: API.Column[] = [
  {
    title: '证件号码',
    width: 150,
    sorter: true,
    key: 'IDNO',
    dataIndex: 'IDNO',
    dispaly: true,
    filter: true,
  },
  {
    title: '客户名称',
    width: 150,
    sorter: true,
    key: 'CUNM',
    dataIndex: 'CUNM',
    dispaly: true,
    filter: true,
  },
  {
    title: '手机号',
    width: 150,
    sorter: true,
    key: 'TLNO',
    dataIndex: 'TLNO',
    dispaly: true,
    filter: true,
  },
  {
    title: '地址',
    width: 150,
    sorter: true,
    key: 'ADDR',
    dataIndex: 'ADDR',
    dispaly: true,
    filter: true,
  },
  {
    title: '客户id',
    width: 150,
    sorter: true,
    key: 'CUID',
    dataIndex: 'CUID',
    dispaly: false,
    filter: true,
  },
  {
    title: '关联客户id',
    width: 150,
    sorter: true,
    key: 'GLCUID',
    dataIndex: 'GLCUID',
    dispaly: false,
    filter: true,
  },
];
const controls: API.Control[] = [
  {
    name: 'IDNO',
    rules: [{ required: false, message: '可以为空' }],
    type: 'text',
    label: '证件号码',
    grid: 12 / 24,
  },
  {
    name: 'CUNM',
    rules: [{ required: false, message: '可以为空' }],
    type: 'text',
    label: '客户名称',
    grid: 12 / 24,
  },
  {
    name: 'TLNO',
    rules: [{ required: false, message: '可以为空' }],
    type: 'text',
    label: '手机号',
    grid: 12 / 24,
  },
  {
    name: 'ADDR',
    rules: [{ required: false, message: '可以为空' }],
    type: 'text',
    label: '地址',
    grid: 12 / 24,
  },
  {
    name: 'CUID',
    rules: [{ required: false, message: '可以为空' }],
    type: 'text',
    label: '客户id',
    grid: 12 / 24,
  },
  {
    name: 'GLCUID',
    rules: [{ required: false, message: '可以为空' }],
    type: 'text',
    label: '关联客户id',
    grid: 12 / 24,
  },
];
const listcontrols: API.Control[] = [
  {
    name: 'DSKH',
    rules: [{ required: false, message: '可以为空' }],
    type: 'search',
    label: '个人客户',
    grid: 18 / 24,
    layout: { labelSpan: 8, wrapperSpan: 15 },
    fetch: {
      tableName: 'TIndiClie',
      searchColumns: ['CUNM', 'IDNO'],
      optionTpl: 'CUNM',
      valueTpl: 'ID',
      isDao: true,
    },
  },
];

const ShBlkhIndiForm: React.FC<PropField> = (props) => {
  const tableRef = useRef<API.TableAction>();
  const [id, setId] = useState<number>(0);
  const submit = async (vals: Record<string, any>) => {
    AddCompbldkGrh(props.CUID, vals.DGKH)
      .then(function () {
        if (tableRef.current) {
          message.info('添加成功');
          tableRef.current?.reload();
        }
      })
      .catch(function (ex) {
        console.error('添加绩费参数出错', ex);
      });
  };
  return (
    <PageHeader>
      <div style={{ marginTop: -5, marginBottom: 10 }}>
        {' '}
        <DataEdit
          showType="inner"
          layout="inline"
          title="对公存款绩费系数"
          controls={listcontrols}
          onSumit={submit}
          renderButtons={(p) => {
            return [
              <Button type="primary" key="submit" onClick={() => p.form?.submit?.()}>
                添加
              </Button>,
              <Button
                type="default"
                key="rest"
                onClick={() => {
                  if (id === 0) {
                    message.info('请选择要删除的账户');
                    return;
                  }
                  DelCompbldkGrh(id)
                    .then(function () {
                      if (tableRef.current) {
                        message.info('删除成功');
                        tableRef.current?.reload();
                      }
                    })
                    .catch(function (ex) {
                      console.error('删除出错', ex);
                    });
                }}
              >
                删除
              </Button>,
            ];
          }}
        />
      </div>

      <DataTable
        daoName={daoName}
        columns={columns}
        controls={controls}
        actionRef={tableRef}
        keyColName={'GLCUID'}
        title="零售关联客户信息"
        pageSize={20}
        seeks={[
          {
            WhereItems: [{ FieldName: 'CUID', Operator: '=', FieldValues: '' + props.CUID }],
            RelationSign: 'AND',
          },
        ]}
        onSelectChange={async (keys) => {
          if (!_.isEmpty(keys)) {
            setId(keys[0] as number);
          }
        }}
      />
    </PageHeader>
  );
};

export default ShBlkhIndiForm;
ShBlkhIndiForm.defaultProps = {
  CUID: 0,
};
